<template>
  <div class="singer-intro">
  <div>
     <h2>简介</h2>
     <div>{{desc}}</div>
  </div>
  <div>
     <h2>基本资料</h2>
  <div>
      <div v-for="(item,index) in basicItem" :key="index">
        <span>{{item.key}}:</span>
        <span style="white-space: pre-wrap">{{item.value}}</span>      
  </div>
  </div>
  </div>
  <div v-for="(item,index) in otherItem" :key="index">
      <h2>{{item.key}}</h2>
      <div style="white-space: pre-wrap">{{item.value}}</div>
  </div>
  </div>
</template>

<script>
export default {
//通过props接受父组件传递的数据 
props:["singeid"],
data(){
    return{
        desc:"",//简介描述
        basicItem:[],//基本资料
        otherItem:[],//其他
    };
},
created(){
    this.getData();
},
methods:{
    getData(){
        this.$request("get","/singer/desc?singermid="+this.singeid).then(
            (res) =>{
                this.desc=res.data.desc;//获取歌手的描述
                this.basicItem=res.data.basic.item;
                this.otherItem=res.data.other.item;
            }
        )
    }
}
}
</script>

<style scoped>
 .singer-intro{
     text-align: left;
     padding: 0 1rem;
 }
</style>